<template>
  <div id="app">
    <!-- <keep-alive>
      巨坑！！！！vue-router切换组件时使组件不销毁问题 不要全局都使用缓存 个别需要的 请在路由原信息中添加判断 
      http://www.yuyanba.com/default.aspx/did121094
    </keep-alive> -->
    <router-view v-if="isRefresh" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: "App",
  data() {
    return {
      isRefresh: true,
    };
  },
  methods: {
    reload() {
      this.isRefresh = false
      this.$nextTick(() => {
        this.isRefresh = true
      })
    }
  },
  // 提供注入依赖刷新局部页面
  provide() {
    return {
      reload: this.reload
    }
  },
  computed: {
    ...mapGetters(['themeColor', 'themeBackgound', 'is', 'menuBg']),
  },
  watch: {
    themeBackgound(newVal) {
      newVal && document.documentElement.style.setProperty('--dynamic-background-color', newVal);
    },
    themeColor(newVal) {
      newVal && document.documentElement.style.setProperty('--dynamic-color', newVal);
    },
    menuBg(newVal) {
      newVal && document.documentElement.style.setProperty('--dynamic-menuBg-color', newVal)
    },
    is(newVal) {
      if (newVal) {
        document.documentElement.style.setProperty('--dynamic-menuColor-color', '#fff')
        document.documentElement.style.setProperty('--dynamic-submenuBg-color', '#000c17')
      } else {
        document.documentElement.style.setProperty('--dynamic-menuColor-color', '#000')
        document.documentElement.style.setProperty('--dynamic-submenuBg-color', '#fafafa')
      }

    },
  },
  async mounted() {
    // 发送请求 获取城市列表
    if (this.$store.getters.isLogin) await this.$store.dispatch('commonData/getCityList')
      
    const rgba = JSON.parse(localStorage.getItem('Back'))
    const item = JSON.parse(localStorage.getItem('menuBG'))
    const color = JSON.parse(localStorage.getItem('ColorIndex'))?.val
    rgba && this.$store.commit('app/SET_BACKGROUND', rgba)
    item && this.$store.commit('app/SET_MENUBG', item)
    color && this.$store.commit('app/SET_COLOR', color)
    if (this.is) return;    
    document.documentElement.style.setProperty('--dynamic-submenuBg-color', '#fafafa')

  }
};
</script>
<style lang="scss">
#app {
  height: auto !important;

  // button
  // & .el-button--primary {
  //   background: var(--dynamic-background-color);
  //   border-color: var(--dynamic-background-color);
  //   color: var(--dynamic-color);
  // }

  // tabs
  // & .el-tabs__item.is-active {
  //   color: var(--dynamic-color);
  // }

  //一级目录下的选中背景
  & .sidebar-container .el-menu-item.is-active {
    background: var(--dynamic-background-color) !important;
  }

  // 分页文字背景
  // & .el-pagination.is-background .el-pager li:not(.disabled).active {
  //   color: var(--dynamic-color);
  //   background: var(--dynamic-background-color);
  // }

  // & .el-tabs__item:hover {
  //   color: var(--dynamic-color);
  // }

}

body,
html {
  min-width: 1900px !important;
}
</style>
